<template>
  <div class="home">
    <HelloWorld3/>
    <div class="banner"> <img src="../assets/3.jpg" alt=""></div>
    <!-- 订酒店 -->
    <div class="main">
      <h1>订酒店</h1>
      <div class="main_intro">
        <input type="text" placeholder="出行目的地">
        <div><el-date-picker  type="datetime" placeholder="入住日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></div>
        <div><el-date-picker  type="datetime" placeholder="离店日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></div>
      </div>
      <div class="title"><p>全部</p>|<p>国内</p>|<p>海外</p></div>
      <div class="main1">
        <h1>普吉岛连锁度假酒店</h1>
        <img src="../assets/10.jpg" alt="">
        <p>
          春天山花烂漫，杜鹃成林，珙桐花开如鸽子飞翔，三十多个品种的杜鹃延绵数十里，每年4至7月随海拔高差的不同而次第开放，漫山遍野，仿若花的海洋；夏天气候凉爽，绿草茵茵，最高气温不超过25摄氏度，是成都近郊避暑、度假、商务会议的首选之地。秋天万山红遍，层林尽染，形成红、黄、绿三色层次渲染的自然景致。冬季这里是冰雪的世界，童话的王国，每年的12月初至次年3月底为积雪期，积雪厚度达60厘米以上，雪质优良，形成南方独特的林海雪原奇观，此外景区开设有高山滑雪、雪地摩托、蛇形雪橇、雪上飞碟、雪上飞片、雪地冲锋舟、狗拉雪橇等10余项冰雪游乐项目。每年的12月初至次年3月底为积雪期，积雪厚度达60厘米以上，雪质优良，形成南方独特的林海雪原奇观，此外景区开设有高山滑雪、雪地摩托、蛇形雪橇、雪上飞碟、雪上飞片、雪地冲锋舟、狗拉雪橇等10余项冰雪游乐项目。
        </p>
      </div>
    </div>
    <!-- end -->
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld3 from '@/components/HelloWorld3.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2
  },
   
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.banner{width: 100%;img{width: 100%;height: 600px;}}
.main{width: 80%;margin: 0px auto;h1{margin: 40px 0;}}
.main_intro{justify-content: space-between;margin: 20px 0;display: flex;flex-direction: row;
input{font-size: 20px;color: gray;border-radius: 5px;border:1px solid #a5a5a5;}}
.main_intro input{border-radius: 5px;padding: 0 10px;width: 48%;}
.title{display: flex;flex-direction: row;color:#a5a5a5;p{&:first-child,&:hover{background-color: #5199d2;color: white;}padding: 3px 10px;color: black;}margin: 10px 20px;font-size: 25px;}
.title{display: flex;flex-direction: row;color:#a5a5a5;p{&:hover{background-color: #5199d2;color: white;}padding: 3px 10px;color: black;}margin: 10px 20px;font-size: 25px;}
.main{width: 80%;margin: 100px auto;}
h1{text-align: center;margin: 50px 0;}
img{width: 100%;}
.main1{p{line-height: 30px;margin: 50px 0;letter-spacing: 1px;}p:last-child{color: #969494;}}

</style>